<template>
  <div class="tools-container">
    <div class="tools-header">
      <h2>AI工具集</h2>
      <p>集成多种实用AI工具，提升工作效率</p>
    </div>

    <div class="tools-grid">
      <!-- 文件操作工具 -->
      <div class="tool-card" @click="openFileTool">
        <div class="tool-icon">📁</div>
        <h3>文件操作</h3>
        <p>读取、创建、修改文件和文件夹</p>
        <div class="tool-features">
          <span class="feature-tag">文件读取</span>
          <span class="feature-tag">文件夹管理</span>
          <span class="feature-tag">内容编辑</span>
        </div>
      </div>

      <!-- 网页获取工具 -->
      <div class="tool-card" @click="openWebTool">
        <div class="tool-icon">🌐</div>
        <h3>网页获取</h3>
        <p>获取指定URL的网页内容</p>
        <div class="tool-features">
          <span class="feature-tag">HTML解析</span>
          <span class="feature-tag">内容提取</span>
          <span class="feature-tag">链接分析</span>
        </div>
      </div>

      <!-- 日期时间工具 -->
      <div class="tool-card" @click="openDateTimeTool">
        <div class="tool-icon">⏰</div>
        <h3>日期时间</h3>
        <p>获取当前时间、设置闹钟提醒</p>
        <div class="tool-features">
          <span class="feature-tag">时间查询</span>
          <span class="feature-tag">闹钟设置</span>
          <span class="feature-tag">时区转换</span>
        </div>
      </div>

      <!-- 数据分析工具 -->
      <div class="tool-card" @click="openDataTool">
        <div class="tool-icon">📊</div>
        <h3>数据分析</h3>
        <p>AI驱动的数据分析和可视化</p>
        <div class="tool-features">
          <span class="feature-tag">统计分析</span>
          <span class="feature-tag">图表生成</span>
          <span class="feature-tag">趋势预测</span>
        </div>
      </div>

      <!-- 图像处理工具 -->
      <div class="tool-card" @click="openImageTool">
        <div class="tool-icon">🎨</div>
        <h3>图像处理</h3>
        <p>AI图像生成、编辑和分析</p>
        <div class="tool-features">
          <span class="feature-tag">图像生成</span>
          <span class="feature-tag">风格转换</span>
          <span class="feature-tag">内容识别</span>
        </div>
      </div>

      <!-- 代码助手工具 -->
      <div class="tool-card" @click="openCodeTool">
        <div class="tool-icon">💻</div>
        <h3>代码助手</h3>
        <p>代码生成、优化和调试辅助</p>
        <div class="tool-features">
          <span class="feature-tag">代码生成</span>
          <span class="feature-tag">错误修复</span>
          <span class="feature-tag">代码优化</span>
        </div>
      </div>
    </div>

    <!-- 工具使用统计 -->
    <div class="usage-stats">
      <h3>使用统计</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ totalUsage }}</div>
          <div class="stat-label">总使用次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ todayUsage }}</div>
          <div class="stat-label">今日使用</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ favoriteTool }}</div>
          <div class="stat-label">最常用工具</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 使用统计数据
const totalUsage = ref(156)
const todayUsage = ref(12)
const favoriteTool = ref('文件操作')

// 打开文件操作工具
const openFileTool = () => {
  ElMessage.info('文件操作工具正在开发中...')
  // TODO: 实现文件操作工具界面
}

// 打开网页获取工具
const openWebTool = () => {
  ElMessage.info('网页获取工具正在开发中...')
  // TODO: 实现网页获取工具界面
}

// 打开日期时间工具
const openDateTimeTool = () => {
  ElMessage.info('日期时间工具正在开发中...')
  // TODO: 实现日期时间工具界面
}

// 打开数据分析工具
const openDataTool = () => {
  ElMessage.info('数据分析工具正在开发中...')
  // TODO: 实现数据分析工具界面
}

// 打开图像处理工具
const openImageTool = () => {
  ElMessage.info('图像处理工具正在开发中...')
  // TODO: 实现图像处理工具界面
}

// 打开代码助手工具
const openCodeTool = () => {
  ElMessage.info('代码助手工具正在开发中...')
  // TODO: 实现代码助手工具界面
}

onMounted(() => {
  // 加载使用统计数据
  console.log('Tools page loaded')
})
</script>

<style scoped>
.tools-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.tools-header {
  text-align: center;
  margin-bottom: 40px;
}

.tools-header h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 700;
}

.tools-header p {
  font-size: 1.2rem;
  color: #666;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.tool-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.tool-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: center;
}

.tool-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

.tool-card p {
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
}

.tool-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.feature-tag {
  background: #f0f2ff;
  color: #667eea;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.usage-stats {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.usage-stats h3 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
  color: #666;
}

@media (max-width: 768px) {
  .tools-container {
    padding: 15px;
  }
  
  .tools-header h2 {
    font-size: 2rem;
  }
  
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .tool-card {
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>